<script setup>
import OrderTimeLine from "../../components/OrderTimeLine.vue";
import CommonModal from "../../components/modal/CommonModal.vue";
import { ref, onMounted } from "vue";
import AddCustomerServiceModal from "../../components/modal/AddCustomerServiceModal.vue";
import { ElMessageBox } from "element-plus";
import { salesCancelOrder, addPrice } from "@/api/goods";
import { useOrder } from "@/store/useOrder";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import { computed } from "vue";
import { useMsg } from "@/store/useMsg";


const orderStore = useOrder();
const router = useRouter();
const msgStore = useMsg();
const props = defineProps({
  orderDetails: {
    type: Object,
    required: true,
    default: () => ({}),
  },
  goodsDetails: {
    type: Object,
    required: true,
    default: () => ({}),
  },
});

const ruleFormRef = ref();
const markUpFormModalShow = ref(false);
const markUpForm = ref({});
const markUpFormRules = ref({
  amount: {
    required: true,
    message: "请输入追加金额",
    trigger: "blur",
  },
  reason: {
    required: true,
    message: "请输入加价原因",
    trigger: "blur",
  },
});
const submitUpForm = async (formEL) => {
  await formEL.validate(async (valid, fields) => {
    if (valid) {
      if (markUpForm.value.amount <= 0) {
        ElMessage.error("加价金额必须大于0");
        return;
      }
      const res = await addPrice({
        orderId: props.orderDetails.id,
        amount: markUpForm.value.amount,
        reason: markUpForm.value.reason,
      });
      if (res.code === 200) {
        msgStore.sendMessage(
          "chatMsg",
          {
            to: props.orderDetails.uimKey,
            content: "加价消息",
            contentType: 7,
            exData: {
              goodsId: props.orderDetails.goodsId,
              orderId: props.orderDetails.id,
              orderDetails: props.orderDetails,
              goodsDetails: props.goodsDetails,
              amount: markUpForm.value.amount,
              reason: markUpForm.value.reason,
            },
          },
          (res) => {
            console.log("加价RES：", res);
          }
        );
        markUpFormModalShow.value = false;
        ElMessage.success("申请加价提交成功");
        orderStore.setReloadOrderDetails(true);
      }
    } else {
      console.log("error submit!", fields);
    }
  });
};
// 联系平台
const addCSModalShow = ref(false);
// 取消订单
const cancelOrder = () => {
  ElMessageBox.confirm("确定取消订单吗？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
    confirmButtonClass: "confirm-btn",
  }).then(async () => {
    console.log("取消订单");
    try {
      await salesCancelOrder({
        orderId: props.orderDetails.id,
      });
      orderStore.setReloadOrderDetails(true);
      ElMessage.success("操作成功");
    } catch (error) {
      console.error(error);
    }
  });
};

const toChat = () => {
  msgStore.sendMessage(
    "chatMsg",
    {
      to: props.orderDetails.uimKey,
      content: "现在可以开始沟通了",
      contentType: 4,
    },
    (res) => {
      console.log("chatMsg res", res);
    }
  );
  router.push(`/message?userId=${props.orderDetails.userId}`);
};
const cancelShow = computed(() => {
  if (props.orderDetails.status === 0 || props.orderDetails.status === 1) {
    return true;
  }
  return false;
});
// 加价按钮显示
const risShow = computed(() => {
  if (props.orderDetails.riseRecord) {
    if (props.orderDetails.riseRecord.status === 2) {
      return false;
    }
  }
  if (props.orderDetails.status === 3) {
    return true;
  }
  return false;
});

// 加价
const addPriceHandle = () => {
  if (props.orderDetails.riseRecord && props.orderDetails.riseRecord.status !== 3) {
    ElMessage.error("订单已有加价记录，请等待处理。");
    return;
  }
  markUpFormModalShow.value = true;
};


</script>

<template>
  <div class="info">
    <div class="user">
      <img class="head" :src="props.orderDetails.buyerProfile" alt="" />
      <div class="name-position">
        <p class="name">
          <span>{{ props.orderDetails.nickName }}</span>
          <span @click="toChat"><img src="@/assets/chat-icon.png" alt="" />发送消息</span>
        </p>
        <p class="position">
          {{ props.orderDetails.level || "~暂无职位信息~" }}
        </p>
      </div>
    </div>
    <div class="goods" v-if="props.goodsDetails">
      <img class="goods-img" :src="props.goodsDetails.coverPic" alt="" />
      <div class="goods-info">
        <p class="name">
          {{ props.orderDetails.goodsName }}
        </p>
        <p class="price">
          {{ props.orderDetails.versionInfo?.versionType === 2 ? "体验版" : "标准版" }}
          · ¥{{ props.orderDetails.amount }}
        </p>
      </div>
    </div>
    <div class="order-operate">
      <button @click="cancelOrder" v-if="cancelShow">取消订单</button>
      <el-button @click="addPriceHandle" v-if="risShow">加价</el-button>
    </div>
    <h4 class="line-sub">交易流程</h4>
    <div class="time-line-list">
      <OrderTimeLine :active="props.orderDetails.status > 0">
        <h4>支付</h4>
        <p>资金支付至平台，订单开启前可随时全额退款</p>
      </OrderTimeLine>
      <OrderTimeLine
        :active="props.orderDetails.status > 1 && props.orderDetails.status !== 2"
      >
        <h4>开启服务</h4>
        <p>卖家上传需求共识，买家确认后开启订单</p>
      </OrderTimeLine>
      <OrderTimeLine :active="props.orderDetails.status >= 3">
        <h4>履约中</h4>
        <p>依据双方的共识内容，完成履约</p>
      </OrderTimeLine>
      <OrderTimeLine :active="props.orderDetails.status >= 4">
        <h4>交付与验收</h4>
        <p>买家确认验收无误，资金转至卖家账户</p>
      </OrderTimeLine>
      <OrderTimeLine :active="props.orderDetails.status === 6">
        <h4>评价</h4>
        <p>双方互评并展示在主页上</p>
      </OrderTimeLine>
    </div>
  </div>
  <div class="service">
    <h3><span>平台支持</span> <span @click="addCSModalShow = true">联系平台</span></h3>
    <p>若在订单履约的过程中遇到任何问题，可联系平台，我们会第一时间为双方提供协助。</p>
  </div>

  <!-- 加价 modal-->
  <CommonModal
    v-if="markUpFormModalShow"
    title="加价"
    @close="markUpFormModalShow = false"
    @confirm="submitUpForm(ruleFormRef)"
  >
    <template #content>
      <p class="modal-tips">
        请与买家充分沟通，井达成共识后再提交，追加的金额需要买家确认并支付
      </p>
      <div class="input-box">
        <el-form
          ref="ruleFormRef"
          :model="markUpForm"
          label-position="top"
          :rules="markUpFormRules"
        >
          <el-form-item label="追加金额" prop="amount">
            <el-input
              type="number"
              v-model="markUpForm.amount"
              placeholder="¥0~¥50000之间"
              style="height: 40px"
            ></el-input>
          </el-form-item>
          <el-form-item label="加价原因" prop="reason">
            <el-input
              type="textarea"
              v-model="markUpForm.reason"
              placeholder="请输入加价原因"
              style="height: 82px; width: 470px"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
    </template>
  </CommonModal>
  <AddCustomerServiceModal v-if="addCSModalShow" @close="addCSModalShow = false" />
</template>

<style scoped lang="scss">
.info {
  width: 382px;
  background: #ffffff;
  box-shadow: 0px 0px 16px 0px rgba(11, 13, 18, 0.06);
  border-radius: 16px 16px 16px 16px;
  border: 1px solid rgba(25, 30, 40, 0.08);
  padding: 20px;
  box-sizing: border-box;
}

.user {
  display: flex;
  align-items: center;
  padding-bottom: 20px;
  border-bottom: 1px solid #ededee;

  .head {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin-right: 8px;
  }

  .name-position {
    flex: 1;

    .name {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 6px;

      span:nth-child(1) {
        font-weight: 600;
        font-size: 20px;
        color: #191e28;
      }

      span:nth-child(2) {
        display: flex;
        align-items: center;
        color: #1dbf73;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;

        img {
          margin-right: 6px;
          position: relative;
          top: 1px;
        }
      }
    }

    .position {
      color: rgba(25, 30, 40, 0.48);
    }
  }
}

.goods {
  display: flex;
  padding-top: 20px;

  .goods-img {
    width: 120px;
    height: 76px;
    margin-right: 12px;
    border-radius: 8px;
  }

  .name {
    color: #191e28;
    font-weight: 600;
    // 超出两行显示省略号
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 22px;
    margin-bottom: 10px;
  }

  .price {
    color: rgba(25, 30, 40, 0.72);
  }
}

.order-operate {
  margin-top: 20px;
  display: flex;
  align-items: center;

  button {
    flex: 1;
    height: 48px;
    background: #1dbf73;
    border-radius: 8px 8px 8px 8px;
    border: none;
    color: #fff;
    font-size: 16px;
    cursor: pointer;

    &:nth-child(1) {
      background: #ffffff;
      border: 1px solid rgba(25, 30, 40, 0.08);
      color: rgba(25, 30, 40, 0.6);
      margin-right: 16px;
    }
  }
}

.line-sub {
  font-size: 16px;
  margin-top: 20px;
  margin-bottom: 12px;
}

.time-line {
  h4 {
    margin-bottom: 5px;
  }

  p {
    color: rgba(25, 30, 40, 0.48);
  }
}

.service {
  width: 382px;
  background: #ffffff;
  box-shadow: 0px 0px 16px 0px rgba(11, 13, 18, 0.06);
  border-radius: 16px 16px 16px 16px;
  border: 1px solid rgba(25, 30, 40, 0.08);
  margin-top: 16px;
  padding: 20px;
  box-sizing: border-box;

  h3 {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;

    span:nth-child(2) {
      color: #1dbf73;
      cursor: pointer;
    }
  }

  p {
    color: rgba(25, 30, 40, 0.48);
    line-height: 24px;
  }
}

.modal-tips {
  color: rgba(25, 30, 40, 0.48);
  font-size: 13px;
  margin-bottom: 12px;
}
</style>
<style>
.input-box .el-form-item__label {
  font-weight: bold;
  color: #191e28;
}

.input-box .el-textarea__inner {
  height: 100%;
}

.confirm-btn {
  background: #ff4f4f23;
  color: #ff4f4f;
  border: 1px solid #ff4f4f;
  &:hover {
    background: #ff4f4f23;
    color: #ff4f4f;
    border: 1px solid #ff4f4f;
  }
}
</style>
